/**
 * 检测项目分析
 * @author yuan_rz
 * @date 2019/12/17 17:14
 */
define(['plugins/echarts/echarts.min'], function (echarts) {

    var self,
        app = win.app,
        doc = document,
        layui = win.layui,
        table,
        vueData = {
            displayTable: false,
            dataListForProduct: [],
            dataListForIssue: [],
            form: {
                TIME: 'MONTH'
            },
            timeList: [{
                value: 'MONTH', label: '本月'
            }, {
                value: 'LAST_MONTH', label: '上月'
            }, {
                value: 'QUARTER', label: '本季度'
            }, {
                value: 'YEAR', label: '本年'
            }],
            chart: {
                legendListForProduct: [],
                dataListForProduct: [],
                legendListForIssue: [],
                dataListForIssue: []
            }
        },
        colsForProduct = [[
            {field: 'ROW_ID', width: 100, title: '序号'}
            , {field: 'NAME', width: 100, title: '产品'}
            , {field: 'VALUE', width: 100, title: '数量'}
        ]],
        colsForIssue = [[
            {field: 'ROW_ID', width: 100, title: '序号'}
            , {field: 'NAME', width: 100, title: '故障'}
            , {field: 'VALUE', width: 100, title: '数量'}
        ]],
        moduleName = '检测项目分析'
    ;

    app.newModule({
        init: function () {
            self = this;
            self._super({
                _tag: 'jcxm'
            }, win);
        },
        initTable: function () {
            layui.use(['table'], function () {
                table = layui.table;
                table.render({
                    elem: app.getByid(doc, 'jcxm_table_product'),
                    title: moduleName + '产品表',
                    id: 'jcxm_table_product',
                    size: _layuiConfig.ui_size,
                    defaultToolbar: [],
                    height: 'full-400',
                    cols: colsForProduct,
                    data: vueData.dataListForProduct,
                    loading: false,
                    page: true,
                    done: function (res, curr, count) {

                    }
                });
                table.render({
                    elem: app.getByid(doc, 'jcxm_table_issue'),
                    title: moduleName + '故障表',
                    id: 'jcxm_table_issue',
                    size: _layuiConfig.ui_size,
                    defaultToolbar: [],
                    height: 'full-400',
                    cols: colsForIssue,
                    data: vueData.dataListForIssue,
                    loading: false,
                    page: true,
                    done: function (res, curr, count) {

                    }
                });
            });
        },
        initChart: function () {
            self.initChartProduct();
            self.initChartIssue();
        },
        initChartProduct: function () {
            var divChartProduct = echarts.init(doc.getElementById('divChartProduct'));
            var optionProduct = {
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                title: {
                    x: 'center',
                    y: 'top',
                    text: '产品'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: vueData.chart.legendListForProduct
                },
                series: [
                    {
                        name: '产品',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: vueData.chart.dataListForProduct,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            divChartProduct.setOption(optionProduct);
        },
        initChartIssue: function () {
            var chartDivIssue = echarts.init(doc.getElementById('divChartIssue'));
            var optionIssue = {
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                title: {
                    x: 'center',
                    y: 'top',
                    text: '故障'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: vueData.chart.legendListForIssue
                },
                series: [
                    {
                        name: '故障',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: vueData.chart.dataListForIssue,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            chartDivIssue.setOption(optionIssue);
        },
        reloadTable: function () {
            self.reloadTableProduct();
            self.reloadTableIssue();
        },
        reloadTableProduct: function () {
            app.ajax({
                xurl: 'bb/jcxm/getListDataForProduct',
                xdata: vueData.form,
                loading: true,
                cb: function (result) {
                    if (result.ok) {
                        vueData.dataListForProduct = result.data.data;
                        var dataList = [];
                        var legendList = [];
                        for (var i = 0; i < vueData.dataListForProduct.length; i++) {
                            vueData.dataListForProduct[i].ROW_ID = i + 1;
                            dataList.push({
                                name: vueData.dataListForProduct[i].NAME,
                                value: vueData.dataListForProduct[i].VALUE,
                            });
                            legendList.push(vueData.dataListForProduct[i].NAME);
                        }
                        vueData.chart.dataListForProduct.pushArray(dataList, true);
                        vueData.chart.legendListForProduct.pushArray(legendList, true);
                        self._reloadTable({id: 'jcxm_table_product', data: vueData.dataListForProduct});
                        self.initChartProduct();
                    }
                }
            });
        },
        reloadTableIssue: function () {
            app.ajax({
                xurl: 'bb/jcxm/getListDataForIssue',
                xdata: vueData.form,
                loading: true,
                cb: function (result) {
                    if (result.ok) {
                        vueData.dataListForIssue = result.data.data;
                        var dataList = [];
                        var legendList = [];
                        for (var i = 0; i < vueData.dataListForIssue.length; i++) {
                            vueData.dataListForIssue[i].ROW_ID = i + 1;
                            dataList.push({
                                name: vueData.dataListForIssue[i].NAME,
                                value: vueData.dataListForIssue[i].VALUE,
                            });
                            legendList.push(vueData.dataListForIssue[i].NAME);
                        }
                        vueData.chart.dataListForIssue.pushArray(dataList, true);
                        vueData.chart.legendListForIssue.pushArray(legendList, true);
                        self._reloadTable({id: 'jcxm_table_issue', data: vueData.dataListForIssue});
                        self.initChartIssue();
                    }
                }
            });
        },
        _ready: function () {
            this._super({
                vue: [{
                    el: '#page',
                    id: 'page',
                    data: vueData,
                    watch: {
                        'form.TIME': function (newValue, oldValue) {
                            self.reloadTable();
                        }
                    }
                }]
            });
            self.initTable();
        },
        _lazy: function () {
            this._super();
            self.reloadTable();
        }
    });
});